<template>
	<view class="container recharge_padding">
		<form @submit="submit">
			<view class="recharge">
				<image src="/static/imgs/vip_back.png"></image>
				<view class="rechargeContent">
					<view class="recharge_header row">
						<image :src="memberInfo.avatar"></image>
						<text>手机号：{{memberInfo.phone||''}}</text>
					</view>
					<!-- <view class="title_recharge">头像</view> -->
				</view>
				<view class="rechargeText">{{storeInfo.store_info.store_name}}</view>
			</view>

			<!--start  充值金额： -->
			<view class="recharge_money">
				<text>充值金额：</text>
				<input type="digit" placeholder="请输入充值金额" name="money" />
			</view>
			<!--end  充值金额： -->

			<!-- start 是否赠送会员：      是                      否 -->
			<view class="isrecharge row">
				<text>是否赠送会员：</text>
				<view>
					<radio-group class="row" name="if_goods_gifts">
						<label class="row isrecharglabel" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<!-- end -->
			<!--start 会员卡一次使用率： -->
			<view class="row isrecharge">
				<text class="recharge_vip">会员卡一次使用率：</text>
				<view class="rechargenumber row">
					<image src="/static/imgs/reduce.png" @click="descreament"></image>
					<text>{{predepositUseProportion}}%</text>
					<image src="/static/imgs/add.png" @click="increament"></image>
				</view>
			</view>
			<view class="rechargemsg">最低设置60%，最高设置100%</view>
			<!-- end-->
			<button class="rechargeButton" form-type="submit">确定充值</button>
			<!-- start 充值备注 -->
			<view class="rechargeremarks ">
				<text>*1、充值前请确认用户信息哦。 </text>
				<text>*2、一旦充值概不退哦，用户可正常消费。</text>
			</view>
			<!-- end -->
		</form>
	</view>
</template>

<script>
	var app = getApp();
	import http from '../../../../common/js/request.js';
	import common from '../../../../common/js/function.js';
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '是'
					},
					{
						value: '2',
						name: '否',
						checked: 'true'
					}
				],
				current: 0,
				storeInfo: {},
				memberId: 0,
				memberInfo: 0,
				predepositUseProportion: 100,
			}
		},
		onLoad(options) {
			var that = this;
			that.memberId = options.member_id;

			if (options.store_id != uni.getStorageSync('storeId')) {
				uni.showModal({
					title: '系统异常',
					content: '充值异常，非本店会员~',
					showCancel: false,
					success: res => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
				return;
			}
			that.getUserInfo();
			that.getStoreInfo();
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				var that = this;
				http.post('api/store/user/UserInfo', {
					user_id: that.memberId
				}, res => {
					that.memberInfo = res.datas;
				});
			},
			//商家详情
			getStoreInfo() {
				var that = this;
				http.post('api/store/store/Store_info', {}, res => {
					that.storeInfo = res.datas;
				});
			},
			//
			submit(e) {
				var that = this;
				var formData = e.detail.value;
				console.log(formData, e);
				http.post('api/store/user/StoreTopUser', {
					...formData,
					user_id: that.memberId,
					predeposit_use_proportion: that.predepositUseProportion
				}, res => {
					console.log(res);
					if (res.state == 1) {
						uni.showToast({
							title: res.datas,
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.navigateBack();
								}, 500);
							}
						});
					} else {
						uni.showToast({
							title: res.datas,
							icon: 'none'
						});
					}
				});
			},
			increament() {
				if (this.predepositUseProportion == 100) {
					wx.showToast({
						title: '最高为100%',
						icon: 'none'
					});
					return;
				}
				this.predepositUseProportion += 1;
			},
			descreament() {
				if (this.predepositUseProportion == 60) {
					wx.showToast({
						title: '最高为60%',
						icon: 'none'
					});
					return;
				}
				this.predepositUseProportion -= 1;
			},
		}
	}
</script>

<style>
	.recharge {
		width: 690rpx;
		height: 375rpx;
		margin: 10rpx auto 0;
		position: relative;
	}

	.recharge image {
		width: 100%;
		height: 100%;
	}

	.rechargeContent {
		width: 690rpx;
		height: 375rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		margin-left: -345rpx;

	}

	.recharge_header {
		height: 94rpx;
		line-height: 94rpx;
		padding: 20rpx 45rpx;
	}

	.recharge_header text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		display: block;
		margin-left: 30rpx;
	}

	.recharge_header image {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
	}

	.title_recharge {
		font-size: 28rpx;
		margin-left: 56rpx;
		color: #fff;
	}

	.rechargeText {
		width: 311rpx;
		height: 46rpx;
		font-size: 48rpx;
		font-family: Lantinghei SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.37);
		opacity: 0.37;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 375rpx;
		line-height: 375rpx;
		text-align: center;
	}

	.recharge_padding {
		padding: 0 30rpx;
	}

	.recharge_money {
		margin-top: 28rpx;
	}

	.recharge_money text,
	.recharge_money input {
		display: block;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
	}

	.recharge_money input {
		border: 1px solid #B9B9B9;
		border-radius: 10rpx;
		padding: 0 4%;
	}

	radio {
		transform: scale(0.6);
	}

	.isrecharge {
		margin-top: 50rpx;
		line-height: 59rpx;
	}

	.isrecharge text {
		font-size: 30rpx;
	}

	.isrecharglabel {
		margin-left: 20rpx;
		font-size: 30rpx;

	}

	.rechargenumber {
		width: 218rpx;
	}

	.rechargenumber image {
		width: 57rpx;
		height: 56rpx;
	}

	.rechargenumber text {
		width: 100rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		display: block;
	}

	.recharge_vip {
		font-size: 30rpx;
		line-height: 56rpx;
	}

	.rechargemsg {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: rgba(193, 193, 193, 1);
		line-height: 70rpx;
		text-align: center;
	}

	.rechargeButton {
		width: 511rpx;
		height: 84rpx;
		background: rgba(255, 157, 17, 1);
		border-radius: 10rpx;
		text-align: center;
		line-height: 84rpx;
		margin: 100rpx auto 0;
		color: #fff;
		font-size: 30rpx;

	}

	.rechargeremarks {
		width: 511rpx;
		margin: 40rpx auto 0;
	}

	.rechargeremarks text {
		display: block;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #C1C1C1;

	}
</style>
